import CardChart, { ChartData, ChartType } from '@/components/CardChart';
import { PageContainer, ProCard } from '@ant-design/pro-components';
import { Button } from 'antd';
import { staContactsProvince } from '@/services/api/contacts';
import { useState } from 'react';
const displaycontactVOArray = await staContactsProvince();

export default () => { 
  
  const [chartType, setChartType] = useState<ChartType>('bar');
  let datalist: ChartData[] = displaycontactVOArray?.map((item: any) => ({
    name: item.province,
    value: item.num,
  }))|| [];

  return (
    <PageContainer>
      <ProCard
        title="图表"
        extra={[
          <Button onClick={() => setChartType('line')}>折线图</Button>,
          <Button onClick={() => setChartType('bar')}>直方图</Button>,
          <Button onClick={() => setChartType('pie')}>饼图</Button>,
          <Button onClick={() => setChartType('grid')}>图表</Button>,
        ]}
      >
        <CardChart id="mycharts1" chartType={chartType} data={datalist} height={500} />
      </ProCard>
    </PageContainer>
  );
};